<template>
  <div>
    <el-dialog title="增加角色" :visible.sync="showAddOrderDialog" center width="35%">

      <el-form :model="employeeData" :rules="rules" ref="employeeData">

        <el-form-item label="所属用户" :label-width="formLabelWidth" prop="customer_id">
          <el-select v-model="employeeData.customer_id" filterable placeholder="请选择">
            <el-option
              v-for="item in customerList"
              :key="item.customer_id"
              :label="item.nickname"
              :value="item.customer_id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所属店铺" :label-width="formLabelWidth" prop="store_id">
          <el-select v-model="employeeData.store_id" filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in storeList"
              :key="index"
              :label="item.name"
              :value="item.customer_store_id">
            </el-option>
          </el-select>
        </el-form-item>



        <el-form-item label="名字" :label-width="formLabelWidth" prop="name">
          <el-input v-model="employeeData.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户手机号" :label-width="formLabelWidth" prop="telephone">
          <el-input v-model="employeeData.telephone" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="微信号" :label-width="formLabelWidth">
          <el-input v-model="employeeData.wechat_number" autocomplete="off"></el-input>
        </el-form-item>

<!--        <el-form-item label="微信二维码" :label-width="formLabelWidth">-->
<!--          <el-input v-model="employeeData.wechat_qrcode" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

        <el-form-item :label="'微信二维码'" :label-width="formLabelWidth">
          <div class="upload_head_img">
            <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_picture" class="avatar-uploader" action="">
              <img v-if="employeeData.wechat_qrcode" :src="employeeData.wechat_qrcode" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-radio v-model="employeeData.role" :label="0">普通员工</el-radio>
          <el-radio v-model="employeeData.role" :label="1">员工</el-radio>
          <el-radio v-model="employeeData.role" :label="2">队长</el-radio>
          <el-radio v-model="employeeData.role" :label="4">管理员</el-radio>
          <el-radio v-model="employeeData.role" :label="3">负责人</el-radio>
          

        </el-form-item>

        <el-form-item label="是否显示注册店铺" :label-width="formLabelWidth">
          <el-switch
            style="display: block;margin-top:6px"
            v-model="display_button"
            active-color="#13ce66"
            inactive-color="#C0CCDA"
            active-text="打开"
            inactive-text="关闭"
            @change="off()"
            >
          </el-switch>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="employeeData.status" :label="0">离职</el-radio>
          <el-radio v-model="employeeData.status" :label="1">在职</el-radio>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit">取 消</el-button>
        <el-button type="primary" @click="submitCustomer('employeeData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {add} from '@/api/thk/employee'
  import {dateFormat} from '@/utils/dateFormat'
  import { client } from '@/utils/alioss'



  export default {
    name: 'addEmployee',
    data() {
      return {
        showAddOrderDialog: false,
        formLabelWidth: '130px',

        /**
         store_id: 1,
         customer_id":      5,
         name:              "莫莫",
         telephone:         "13714179299",
         wechat_number:      "haishzaixiang",
         wechat_qrcode:     "zanshimeiyou",employee": 1,
         role: 1,
         status: 1,
         date_added: "2020-04-22 15:52:24"
         */

        employeeData: {
          customer_id: '',
          store_id: '',
          name: '',
          telephone: '',
          wechat_number: '',
          wechat_qrcode: '',
          role: undefined,                // 0队员    1队长
          status: undefined,              // 0离职    1在职
          date_added: '',
          is_display_button:undefined
        },

        customerList: [],
        storeList: [],
        display_button:false,

        rules: {
          // 昵称必填
          name:[
            { required: true, message: '必填项', trigger: 'blur' },
          ],
          telephone:[
            // { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度必须为11位', trigger: 'blur' }
          ],
          customer_id: [
            { required: true, message: '请选择用户', trigger: 'change' }
          ],
          store_id: [
            { required: true, message: '请选择店铺', trigger: 'change' }
          ],
        },
      }
    },


    methods: {
      off(){
        this.employeeData.is_display_button=this.display_button ? 1 : 2;
      },
      // 判断是否点击了提交
      submitCustomer(employeeData){
        this.$refs[employeeData].validate((valid) => {
          if (valid) {
            this.employeeData.date_added = dateFormat("YYYY-mm-dd HH:MM:SS", new Date())
            add(store.getters.token,this.employeeData).then(result => {
              // 增加成功
              this.showAddOrderDialog = !this.showAddOrderDialog
              this.$parent.getEmployeeList()
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      cancelSubmit(customerList, storeList){
        this.customerList = customerList
        this.storeList = storeList
        this.showAddOrderDialog = !this.showAddOrderDialog

      },


      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_picture(file){
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.employeeData, 'wechat_qrcode', res.url)


          console.log(res.url);
          that.$message.success('头像地址上传成功！')
        }).catch((err) => {
          that.$message.error('头像地址上传失败，原因：' + err)
        })
      },

    }
  }
</script>

<style>
  /* 图片上传的样式 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }

  /* 头像地址(head_img)图片上传组件的尺寸 */
  .upload_head_img .avatar-uploader .el-upload{
  }
  .upload_head_img .avatar-uploader-icon{
    font-size: 28px;
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
  .upload_head_img .avatar{
    width: 80px;
    height: 80px;
  }
</style>
